<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./src/css/jquery.spinner.css">
    <link rel="stylesheet" type="text/css" href="./src/css/cart.css">

    <title>Title</title>
    <script src="./src/js/lib/jquery-1.12.3.min.js"></script>
    <script src="./src/js/lib/layer-v3.1.1/layer.js"></script>
    <!--<script src="./src/js/cart.js"></script>-->
    <script src="./src/js/fangdaj.js"></script>
    <script class="resources library" src="./src/js/lib/area.js" type="text/javascript"></script> <!-- 导入js -->
    <script src="./src/js/area1.js"></script>
    <script src="./src/js/lib/jquery.spinner.js" type="text/javascript"></script>
    <script src="./src/js/cart.js"></script>
    <script type="text/javascript" src="src/js/lib/1_jquery-fly/jquery.fly.min.js"></script>
    <!--<script type="text/javascript" src="src/js/lib/1_jquery-fly/requestAnimationFrame.js"></script>-->
    <style>
        .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}
        #msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}
    </style>
</head>
<body>
<div class="userinfo">欢迎:xxx登录</div>
<div class="dingbu">
    <img src="./src/images/logo.png" alt="" class="left-logo">
    <img src="./src/images/head_right.jpg" alt="" class="right-logo">
</div>
<div class="nav-nav">
    <ul class="nav1">
        <li class="nn">
            <a href="#">选酒中心</a>
            <div class="nav-nav1">
                <ul class="nav1-1">
                    <li><a href="#">中国白酒</a></li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">茅台</a>
                    </li>
                    <li>
                        <a href="#">五粮液</a>
                    </li>
                    <li>
                        <a href="#">洋酒</a>
                    </li>
                    <li>
                        <a href="#">红花郎</a>
                    </li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">陈年老酒</a>
                    </li>
                    <li>
                        <a href="#">酱香型</a>
                    </li>
                    <li>
                        <a href="#">贵州</a>
                    </li>
                </ul>
                <ul class="nav1-1">
                    <li><a href="#">葡萄酒</a></li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">法国</a>
                    </li>
                    <li>
                        <a href="#">意大利</a>
                    </li>
                    <li>
                        <a href="#">智利</a>
                    </li>
                    <li>
                        <a href="#">干红</a>
                    </li>
                    <li>
                        <a href="#">桃红</a>
                    </li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">甜白</a>
                    </li>
                    <li>
                        <a href="#">旗袍</a>
                    </li>
                    <li>
                        <a href="#">2017年酒</a>
                    </li>
                    <li>
                        <a href="#">列级庄</a>
                    </li>
                </ul>
                <ul class="nav1-1">
                    <li>
                        <a href="#">洋酒 烈酒</a>
                    </li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">轩尼诗</a>
                    </li>
                    <li>
                        <a href="#">维斯基</a>
                    </li>
                    <li>
                        <a href="#">鸡尾酒</a>
                    </li>
                    <li>
                        <a href="#">百利甜</a>
                    </li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">干邑</a>
                    </li>
                    <li>
                        <a href="#">白兰地</a>
                    </li>
                    <li>
                        <a href="#">朗姆酒</a>
                    </li>
                    <li>
                        <a href="#">附加特</a>
                    </li>
                </ul>
                <ul class="nav1-1">
                    <li>
                        <a href="#">啤酒 黄酒 日韩酒</a>
                    </li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">进口啤酒</a>
                    </li>
                    <li>
                        <a href="#">精酿黄酒</a>
                    </li>
                    <li>
                        <a href="#">钜惠抢购</a>
                    </li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">绍兴黄酒</a>
                    </li>
                    <li>
                        <a href="#">清酒</a>
                    </li>
                    <li>
                        <a href="#">梅酒</a>
                    </li>
                    <li>
                        <a href="#">烧酒</a>
                    </li>
                </ul>
                <ul class="nav1-1">
                    <li>
                        <a href="#">杀局周边</a>
                    </li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">酒杯</a>
                    </li>
                    <li>
                        <a href="#">酒具</a>
                    </li>
                    <li>
                        <a href="#">酒刀</a>
                    </li>
                    <li>
                        <a href="#">醒酒器</a>
                    </li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">礼盒</a>
                    </li>
                    <li>
                        <a href="#">其他酒具</a>
                    </li>
                </ul>
                <ul class="nav1-4">
                    <li class="lili">
                        <a href="#">一件选酒</a>
                    </li>
                </ul>
                <!--<ul class=nav1-1">-->
                <!--<li>-->
                <!--<a href="#">礼盒</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a href="#">餐酒精选</a>-->
                <!--</li>-->
                <!--<li>-->
                <!--<a href="#">实惠套餐</a>-->
                <!--</li>-->
                <!--</ul>-->
                <ul class="nav1-2">
                    <li>
                        <a href="#">权威高分酒</a>
                    </li>
                    <li>
                        <a href="#">聚会婚庆整箱</a>
                    </li>
                </ul>
                <ul class="nav1-2">
                    <li>
                        <a href="#">精品闪购</a>
                    </li>
                    <li>
                        <a href="#">海淘</a>
                    </li>
                    <li>
                        <a href="#">陈酿老酒</a>
                    </li>
                </ul>
            </div>
        </li>
        <li><a href="#">首页</a></li>
        <li><a href="#">超值抢购</a></li>
        <li><a href="#">名庄甄选</a></li>
        <li><a href="#">非常大牌</a></li>
        <li><a href="#">香港免税</a></li>
        <li><a href="#">也买严选</a></li>
        <li><a href="#">清仓大卖</a></li>
        <li><a href="#">也买快送</a></li>
    </ul>
</div>



<div id="fdj">
    <div id="middleImg">
        <img src="./src/images/1-2.jpg" alt="">
        <img src="./src/images/2-2.jpg" alt="">
        <img src="./src/images/3-2.jpg" alt="">
        <img src="./src/images/4-2.jpg" alt="">
        <div id="middleArea"></div>
    </div>
    <div id="small">
        <ul>
            <li><img src="./src/images/4-1.jpg" alt=""></li>
            <li><img src="./src/images/3-3.jpg" alt=""></li>
            <li><img src="./src/images/3-1.jpg" alt=""></li>
            <li><img src="./src/images/3-4.jpg" alt=""></li>
        </ul>
    </div>
    <div id="bigArea">
        <img src="./src/images/1-2.jpg" alt="" id="bigImg">
        <img src="./src/images/2-2.jpg" alt="" id="bigImg2">
        <img src="./src/images/3-2.jpg" alt="" id="bigImg3">
        <img src="./src/images/4-2.jpg" alt="" id="bigImg4">
    </div>
</div>

<div id="right">
    <h3 class="pro_info">也买酒法国拉菲干红葡萄酒（传奇+珍藏+传说）红酒组合750ml6支装</h3>
    <p class="p1">买就送酒具三件套</p>
    <p class="p2">
        <span>价格</span> <span class="pro_price">￥&nbsp;998</span>
    </p>
    <div class="info">
        <div class="quyu">
            <span>运费</span>
            <!-- 设置name -->
            <select id="s_province" name="s_province"></select>

            <select id="s_city" name="s_city"></select>

            <select id="s_county" name="s_county"></select>
            <script type="text/javascript">_init_area();</script>
        </div>
    </div>
    <div class="jifen">
        <span>累计评价</span>
        <span>185</span>
        <span>送天猫积分</span>
        <span>999</span>
    </div>
    <div class="fenlei">
        <span>颜色分类</span>
        <!--<img src="../src/images/xx.png" alt="" class="img">-->
        <span></span>
    </div>
    <div class="shul">
        <span>数量</span>
        <center>
            <!-- class="spinnerExample" -->
            <input type="text" class="spinnerExample"/>
            <!--<button id="btn">提交</button>-->
        </center>
    </div>
    <div class="MM">
        <button class="goumai">立即购买</button>
        <button class="lijigoumai">加入购物车</button>
        <div class="gwc"></div>
    </div>
    <div class="cn">
        <span>服务承诺</span>
        <span>不支持七天无理由退换</span>
        <span>破损包退</span>
        <span>正品保证</span>
        <span>支付方式</span>
        <div class="jianxia"></div>
        <br>
        <span>极速退款</span>
        <span>赠运费险</span>
    </div>
    <div class="anquan">检测到您当前处于非安全网络环境，部分商品信息可能不准确，请在交易支付页面再次确认商品价格信息。</div>
</div>

<div id="right-1">
    <div class="right1">
        <p class="s"></p>
        <span>看了又看</span>
    </div>
    <div class="gengduo" >
        <ul>
            <li>
                <a href="#"><img src="./src/images/x1.jpg" alt=""></a>
            </li>
            <li class="li2">
                <a href="#">￥599.00</a>
            </li>
            <li class="li3">
                <a href="#">也买酒 西班牙进口红酒 桃乐丝...</a>
            </li>
        </ul>

    </div>
    <div class="gengduo" >
        <ul>
            <li>
                <a href="#"><img src="./src/images/x2.jpg" alt=""></a>
            </li>
            <li class="li2">
                <a href="#">￥699.00</a>
            </li>
            <li class="li3">
                <a href="#">也买酒 西班牙进口红酒 桃乐丝...</a>
            </li>
        </ul>

    </div>
    <div class="gengduo" >
        <ul>
            <li>
                <a href="#"><img src="./src/images/x3.jpg" alt=""></a>
            </li>
            <li class="li2">
                <a href="#">￥799.00</a>
            </li>
            <li class="li3">
                <a href="#">也买酒 西班牙进口红酒 桃乐丝...</a>
            </li>
        </ul>

    </div>
    <div class="jiantou">
        <span class="syig">

        </span>
        <span class="xyig">

        </span>
    </div>
</div>
<div id="jiar">
    <div></div>
    <div id="end"></div>
    <div class="shopping">购物车</div>
    <div>￥</div>
    <div>☆</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="msg">已成功加入购物车！</div>
</div>

<div>
    <img src="./src/images/12.png" alt="" class="gouwuche1">
</div>


<script>
    $(function(){
        var offset=$(".shopping").offset();//结束地方的元素
        $(".lijigoumai").on("click",function(event){ //加入购物车按钮 触发事件
            var addcar=$(this);
            var img=$("#middleImg").find("img").attr("src");
            var flyer = $('<img class="u-flyer" src="'+img+'">');

            //飞
            flyer.fly({
                //起点
                start: {
                    left: event.clientX,
                    top: event.clientY
                },
                //终点
                end: {
                    left: offset.left,
                    top: offset.top,
                    width: 0,
                    height: 0
                },

                onEnd:function(){
                    console.log("到达终点");
                    $("#msg").show().animate({width:250},200).fadeOut(1000);
                }
            });
        })
        $(".goumai").on("click",function(){
            window.location="addtocart.html"
        })
    })
</script>
</body>
</html>